<template>
    <div id="wrap" :style="{ background: bgcolor }">
        <div class="top">
            <h1 :style="{ color: titleColor }">农业数据实时监控系统</h1>
            <span class="zhu" @click="change">主题切换</span>
            <img src="../assets/top02.png" alt="">
        </div>
        <div class="body">
            <div class="left">
                <div class="top">
                    <home></home>
                </div>
                <div class="bottom">
                    <shouru></shouru>
                </div>
            </div>
            <div class="center">
                <div class="top">
                    <dqzb></dqzb>
                </div>
                <div class="bottom">
                    <mymap></mymap>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    <bolang></bolang>
                </div>
                <div class="bottom">
                    <mianji></mianji>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import home from "./AreaTopPage.vue"
import shouru from "./shouru.vue"
import bolang from './bolang.vue'
import Mianji from './mianji.vue'
import Dqzb from './dqzb.vue'
import mymap from "./map.vue"




export default {
    data() {
        return {
            ison: true,
            bgcolor: "#fff",
            titleColor: '#000',
        }
    },
    methods: {
        change() {
            this.ison = !this.ison
            if (this.ison) {
                this.bgcolor = '#fff'
                this.titleColor = '#000'
            } else {
                this.bgcolor = '#333'
                this.titleColor = '#fff'
            }
            this.$store.commit('change', this.ison)
        }

    },
    mounted() {

    },
    watch: {},
    computed: {},
    filters: {},
    components: {
        home,
        shouru,
        bolang,
        Mianji,
        Dqzb,
        mymap


    }
}
</script>
<style scoped>
.body .left .top {
    width: 100%;
    height: 400px;
    position: relative;
}

#wrap {
    width: 100%;
    height: 100vh;

    overflow: hidden;

}

.body {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.body .left {
    height: 100vh;

    width: 25%;
}

.body .left .top,
.bottom {
    box-sizing: border-box;
    width: 100%;
    height: 40%;
    border: 1px solid #34DEE5;
}

.body .left .bottom {
    margin-top: 40px;
}

.body .right {

    width: 25%;
    height: 100vh;
    margin-right: 20px;
}

.body .right .top,
.bottom {
    box-sizing: border-box;
    width: 100%;
    height: 40%;
    border: 1px solid #34DEE5;
}

.body .right .bottom {
    margin-top: 40px;
}

.body .center {
    margin: 0 50px;
    width: 53%;
}

.body .center .top {
    border: 1px solid #34DEE5;
    height: 18%;
}

.body .center .bottom {
    border: 1px solid #34DEE5;
    margin-top: 40px;
    height: 62%;
}

img {
    width: 100%;
    margin-top: -30px;
}

h1 {
    color: #fff;
    text-align: center;
    margin-top: 20px;
}

.zhu {
    position: absolute;
    font-size: 20px;
    top: 20px;
    right: 40px;
    color: #3beb20;
    cursor: pointer;

    -moz-user-select: none;
    /*火狐*/

    -webkit-user-select: none;
    /*webkit浏览器*/

    -ms-user-select: none;
    /*IE10*/

    -khtml-user-select: none;
    /*早期浏览器*/

    user-select: none;
}
</style>